<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">
				菜色管理
			</div>
			<div slot="right" @click="addDishes">
				新建
			</div>
		</my-header>
		<div class="cont-nof" style="background: #FFFFFF;">
			<div class="home_title tl">
				菜色管理
			</div>
			<div class="dishes_list oa flex">
				<div class="dishes_item" v-for="item in foodList" @click="dishesView(item)">
					<img :src="item.imageList[0].url">
					<div>
						{{item.name}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        access:this.$Cookies.get('loginType'),
				foodList: [],
			}
		},
		methods: {
			dishesView(item) {
				this.$router.push({
					path: '/dishesCont',
					query: {
						data: JSON.stringify(item)
					}
				})
			},
			addDishes() {
				this.$router.push('/addDishes')
			},
			fetchFood() {
				this.$http.fetchFood().then(resp => {
					this.foodList = resp.data.records;
				})
			}
		},
		mounted() {
			this.fetchFood();
		}
	}
</script>

<style scoped>
	.home_title {
		font-size: 1.8rem;
		border-left: 4px solid #36C12D;
		border-radius: 10px;
		width: 0;
		white-space: nowrap;
		text-indent: 1rem;
		line-height: 1.8rem;
		height: 1.8rem;
		margin: 1.5rem;
	}

	.dishes_list {
		height: calc(100% - 4.8rem);
		width: calc(100% - 2rem);
		margin: auto;
		flex-wrap: wrap;
		justify-content: space-around;
		align-content: flex-start;
	}

	.dishes_list::after {
		content: "";
		width: 16.5rem;
	}

	.dishes_item {
		margin-bottom: 1.5rem;
	}

	.dishes_item img {
		height: 12rem;
		width: 16.5rem;
		margin-bottom: 1rem;
	}
</style>
